.couponCard {


  .content {
    margin: auto;
    width: 680px;
    // margin-top: 40rpx;
    // background: #FFFFFF;
    // box-shadow: 1px 2px 6px 0px rgba(154, 154, 154, 0.2);
    // border-radius: 8px;

    margin-bottom: 30rpx;


    .hole-card {
      position: relative;
      overflow: hidden;
      margin: 0 auto;


      // 孔在下方
      .hole-down {
        // 卡片宽度
        width: 680px;
        overflow: hidden;

        // 可不要
        min-height: 40px;

        // 阴影 - 不需要就去掉
        // 3px 大小, 灰色阴影
        filter: drop-shadow(0 0 3px #fff);

        &::before {
          position: absolute;
          content: "";
          // 孔半径
          bottom: -25px;
          left: -25px;
          // 孔直径
          width: 50px;
          height: 50px;
          border-radius: 50%;

          // 白色背景，宽度 = 卡片宽度 - 孔直径
          box-shadow: 0 0 0 480px #fff;
          z-index: -2;
        }

        &::after {
          position: absolute;
          content: "";
          bottom: -25px;
          right: -25px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          box-shadow: 0 0 0 480px #fff;
          z-index: -2;
        }

        // 卡片中间虚线 不需要就去掉
        // .middle-border {
        //   position: absolute;

        //   // 宽度 = 卡片宽度 - 孔直径
        //   width: 480px;
        //   // 左移孔半径
        //   left: 60px;
        //   bottom: 0;
        //   border: 1px dashed #ccc;
        // }
      }

      // 孔在上方
      .hole-up {
        width: 680px;
        overflow: hidden;
        filter: drop-shadow(0 0 0px #fff);

        min-height: 40px;

        &::before {
          position: absolute;
          content: "";
          top: -25px;
          left: -25px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          box-shadow: 0 0 0 480px #fff;
          z-index: -2;
        }

        &::after {
          position: absolute;
          content: "";
          top: -25px;
          right: -25px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          box-shadow: 0 0 0 480px #fff;
          z-index: -2;
        }
      }

      // // 遮盖上边阴影, 没有阴影则删掉
      // .cover-up {
      //   // 3px 为阴影宽度
      //   padding: 3px;
      //   padding-top: 0;
      //   overflow: hidden;
      // }

      // // 遮盖下边阴影
      // .cover-down {
      //   padding: 3px;
      //   padding-bottom: 0;
      //   overflow: hidden;
      // }
    }
  }
}

.couponCard {


  .couponCard-top {
    display: flex;
    height: 174rpx;

    &-left {
      margin-left: 60rpx;
      margin-top: 40rpx;

      .firstview {

        // width: 59px;
        // height: 38px;
        .tag {
          border: 2rpx solid #DEDEDE;
          border-radius: 4rpx;
          padding: 5rpx 10rpx;
          font-size: 18px;
          font-family: PingFangSC;
          font-weight: 300;
          color: #DEDEDE;
        }

      }

      .lastview {

        font-size: 28rpx;
        font-family: PingFangSC;
        font-weight: 500;

        color: #DEDEDE;

        .money {

          font-size: 70rpx;
          font-family: PingFangSC;
          font-weight: 500;

          color: #DEDEDE;
        }
      }
    }

    &-right {
      position: absolute;
      width: 90rpx;
      height: 174rpx;
      right: 0;

      font-size: 28rpx;
      font-family: PingFangSC;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
      // background: #DEDEDE;
      // border-radius: 8rpx;r
      // float: right;

      overflow: hidden;



      view {
        width: 27rpx;
        word-wrap: break-word;
        font-size: 28rpx;
        font-family: PingFangSC;
        font-weight: 500;
        color: #ffffff;
        margin: auto;
        margin: 36rpx auto;
        line-height: 36rpx;
      }

      &::after {
        position: absolute;
        content: "";
        top: 149px;
        right: -25px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 0 0 480px #DEDEDE;
        z-index: -1;
      }
    }

    .info {
      margin-top: 40rpx;
      margin-left: 40rpx;

      .info-title {

        font-size: 28rpx;
        font-family: PingFangSC;
        font-weight: 500;
        color: #DEDEDE;
      }

      .info-category {
        margin-top: 10rpx;
        font-size: 20rpx;
        font-family: PingFangSC;
        font-weight: 300;
        color: #DEDEDE;
      }

      .info-time {

        margin-top: 10rpx;
        font-size: 24px;
        font-family: PingFangSC;
        font-weight: 300;
        color: #DEDEDE;
      }
    }
  }

  .couponCard-buttom {
    width: 511rpx;
    font-size: 20px;
    font-family: PingFangSC;
    font-weight: 300;
    color: #DEDEDE;
    margin-left: 50rpx;
    // margin-top: 30rpx;
    padding-top: 30rpx;
    padding-bottom: 20rpx;
    border-top: 2rpx dashed #DEDEDE;

    .couponCard-buttom-right {
      width: 30rpx;
      overflow: hidden;
      position: absolute;
      width: 90rpx;
      height: 80rpx;
      right: 0;
      top: 0;

      &::after {
        position: absolute;
        content: "";
        top: -25px;
        right: -25px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 0 0 480px #EDEDED;
        z-index: -1;
      }
    }
  }
}


.red {
  .couponCard-top-left {
    .firstview {

      // width: 59px;
      // height: 38px;
      .tag {
        border: 2rpx solid #E95614;
        color: #EA5614;
      }

    }

    .lastview {

      color: #EA5614;

      .money {

        color: #EA5614;
      }
    }


  }

  .info {

    .info-title {

      color: #343434 !important;
    }

    .info-category {

      color: #9A9A9A !important;
    }

    .info-time {
      color: #9A9A9A !important;
    }
  }

  .couponCard-top-right::after {
    box-shadow: 0 0 0 480rpx #E95614;
  }

  .couponCard-buttom .couponCard-buttom-right::after {
    box-shadow: 0 0 0 480rpx #E98456;
  }

  .couponCard-top-right view {
    margin: 10rpx auto;
  }

  // 
}



.yellow {
  .couponCard-top-left {
    .firstview {

      // width: 59px;
      // height: 38px;
      .tag {
        border: 2rpx solid #FFD040;
        color: #FFD040;
      }

    }

    .lastview {

      color: #FFD040;

      .money {

        color: #FFD040;
      }
    }


  }

  .info {

    .info-title {

      color: #FFD040 !important;
    }

    .info-category {

      color: #FFD040 !important;
    }

    .info-time {
      color: #FFD040 !important;
    }
  }

  .couponCard-top-right::after {
    box-shadow: 0 0 0 480rpx #FFD040;
  }

  .couponCard-buttom .couponCard-buttom-right::after {
    box-shadow: 0 0 0 480rpx #FFD040;
  }

  .couponCard-top-right view {
    margin: 10rpx auto;
  }

  // 
}

.orange {
  .couponCard-top-left {
    .firstview {

      // width: 59px;
      // height: 38px;
      .tag {
        border: 2rpx solid #E95513;
        color: #E95513;
      }

    }

    .lastview {

      color: #E95513;

      .money {

        color: #E95513;
      }
    }


  }

  .info {

    .info-title {

      color: #E95513 !important;
    }

    .info-category {

      color: #E95513 !important;
    }

    .info-time {
      color: #E95513 !important;
    }
  }

  .couponCard-top-right::after {
    box-shadow: 0 0 0 480rpx #E95513;
  }

  .couponCard-buttom .couponCard-buttom-right::after {
    box-shadow: 0 0 0 480rpx #E95513;
  }

  .couponCard-top-right view {
    margin: 10rpx auto;
  }

  // 
}
